eslint-plugin-babel

What is eslint-plugin-babel?

The eslint-plugin-babel package provides additional ESLint rules for Babel-specific syntax and features. It helps in linting code that uses Babel transformations, ensuring that the code adheres to best practices and coding standards.

What are eslint-plugin-babel's main functionalities?

babel/new-cap

This rule is similar to ESLint's core new-cap rule but ignores capitalized decorators and allows new operators with lowercase names.

module.exports = {
  "rules": {
    "babel/new-cap": 1
  }
};

babel/no-invalid-this

This rule is similar to ESLint's core no-invalid-this rule but considers class properties as well.

module.exports = {
  "rules": {
    "babel/no-invalid-this": 1
  }
};

babel/object-curly-spacing

This rule is similar to ESLint's core object-curly-spacing rule but can be used to enforce consistent spacing inside braces of object literals, destructuring assignments, and import/export specifiers.

module.exports = {
  "rules": {
    "babel/object-curly-spacing": ["error", "always"]
  }
};

babel/quotes

This rule is similar to ESLint's core quotes rule but allows for template literals.

module.exports = {
  "rules": {
    "babel/quotes": ["error", "single"]
  }
};

babel/semi

This rule is similar to ESLint's core semi rule but can be used to enforce or disallow semicolons.

module.exports = {
  "rules": {
    "babel/semi": ["error", "always"]
  }
};

Other packages similar to eslint-plugin-babel

eslint-plugin-react

eslint-plugin-react provides linting rules specific to React. It helps in enforcing best practices and coding standards for React applications. Unlike eslint-plugin-babel, which focuses on Babel-specific syntax, eslint-plugin-react is tailored for React components and JSX.

eslint-plugin-import

eslint-plugin-import offers linting rules for import/export syntax, ensuring that modules are imported and exported correctly. While eslint-plugin-babel focuses on Babel transformations, eslint-plugin-import is more concerned with module resolution and import/export statements.

eslint-plugin-jsx-a11y

eslint-plugin-jsx-a11y provides accessibility linting rules for JSX elements. It ensures that JSX code is accessible to users with disabilities. This plugin is different from eslint-plugin-babel as it focuses on accessibility rather than Babel-specific syntax.

README

eslint-plugin-babel

An eslint plugin companion to babel-eslint. babel-eslint does a great job at adapting eslint for use with Babel, but it can't change the built in rules to support experimental features. eslint-plugin-babel re-implements problematic rules so they do not give false positives or negatives.

Requires Node 4 or greater

Install

npm install eslint-plugin-babel --save-dev

Load the plugin in your .eslintrc file:

{
  "plugins": [
    "babel"
  ]
}

Finally enable all the rules you would like to use (remember to disable the original ones as well!).

{
  "rules": {
    "babel/new-cap": 1,
    "babel/camelcase": 1,
    "babel/no-invalid-this": 1,
    "babel/object-curly-spacing": 1,
    "babel/quotes": 1,
    "babel/semi": 1,
    "babel/no-unused-expressions": 1,
    "babel/valid-typeof": 1
  }
}

Rules

Each rule corresponds to a core eslint rule, and has the same options.

🛠: means it's autofixable with --fix.

• babel/new-cap: Ignores capitalized decorators (@Decorator)
• babel/camelcase: doesn't complain about optional chaining (var foo = bar?.a_b;)
• babel/no-invalid-this: doesn't fail when inside class properties (class A { a = this.b; })
• babel/object-curly-spacing: doesn't complain about export x from "mod"; or export * as x from "mod"; (🛠)
• babel/quotes: doesn't complain about JSX fragment shorthand syntax (<>foo</>;)
• babel/semi: doesn't fail when using for await (let something of {}). Includes class properties (🛠)
• babel/no-unused-expressions: doesn't fail when using do expressions or optional chaining (a?.b()).
• babel/valid-typeof: doesn't complain when used with BigInt (typeof BigInt(9007199254740991) === 'bigint').

Deprecated

Rule	Notes
babel/generator-star-spacing	Use generator-star-spacing since eslint@3.6.0
babel/object-shorthand	Use object-shorthand since eslint@0.20.0
babel/arrow-parens	Use arrow-parens since eslint@3.10.0
babel/func-params-comma-dangle	Use comma-dangle since eslint@3.8.0
babel/array-bracket-spacing	Use array-bracket-spacing since eslint@3.9.0
babel/flow-object-type	Use flowtype/object-type-delimiter since eslint-plugin-flowtype@2.23.0
babel/no-await-in-loop	Use no-await-in-loop since eslint@3.12.0